<template>
  <mytitle title="我的联系人">
     <template #left>
           <el-avatar :size="50" :src="circleUrl" />
     </template>
     <template #right>
         <el-input
         v-model="input2"
         class="w-20 m-2"
         placeholder="Type something"
         :prefix-icon="Search"
         />
         <el-button type="success">搜索</el-button>
     </template>
  </mytitle>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="编号" width="180" />
    <el-table-column prop="linkName" label="联系人" width="180" />
    <el-table-column prop="phone" label="电话" />
    <el-table-column prop="cgy" label="分类" />
    <el-table-column fixed="right" label="操作" width="120">
      <template #default="xx">
        <el-button link type="primary" size="small" @click="updateLink(xx.row)">修改</el-button>
        <el-button link type="primary" size="small" @click="delLink(xx)" >删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import {ref,reactive,onMounted} from 'vue'
import axios from '../axios/index.js'
import {useRouter} from 'vue-router'
import mytitle from '../components/Title.vue'

const router=useRouter();
const tableData = ref([])
const updateLink=function(row){
   alert("你正在修改"+JSON.stringify(row))
   //router.push("/edit"带参数)
}
const delLink=function(xx){
   console.log(xx)
   axios.post("/del?id="+xx.id)
       .then(d=>{
            if(d.data.code==2000){
               alert(d.data.msg)  
            } 
   })
   alert("你正在删除"+JSON.stringify(row))
}
const loadData=()=>{
   axios
   .get("https://m1.apifoxmock.com/m1/6731094-6442317-default/list")
   .then((d)=>{
      if(d.data.code==2000){
         tableData.value=d.data.data;
      }else{
         alert("加载失败"+d.data.msg);
      }
   })
}
onMounted(()=>{
  
   loadData()
})//页面显示的时候自动触发

</script>
